<template>
    <fieldset>
        <legend>高级侦听器</legend>
        <button @click="handleStop">点击停止侦听</button>
    </fieldset>
</template>
<script setup>
import {ref ,watchEffect} from "vue"
let msg = ref('窗外')
let msg2 = ref('春天的故事')
// setTimeout(() => {
//     msg.value = '99999'
// }, 2000);
// setTimeout(() => {
//     msg2.value = '涛声依旧'
// }, 3000);
// 不需要指定特定的侦听的数据，只需要把侦听数据放到函数中使用，在数据变化的时候，侦听器会重新被触发
// let stop = watchEffect(()=>{
//     console.log('高级侦听器',msg.value);
//     console.log('高级侦听器',msg2.value);
// })
// 停止侦听，再次调用watchEffect的返回值
// 正常情况下，组件卸载会自动停止侦听，但是也可以通过调用watchEffect的返回值来停止侦听
let handleStop = function(){
    // 停止侦听
    stop()
}
// 失效函数 onInvalidate
// 触发的情况：1.watchEffect即将重新回调，2.watchEffect停止侦听（组件卸载，隐式停止侦听；或通过显示调用返回值，主动停止侦听）
// 顺序：1.打印'春天的故事'=>'侦听器即将重新执行'=>'水手'
watchEffect((onInvalid)=>{
    console.log('onInvalidate',msg2.value);
    onInvalid(()=>{
        console.log('侦听器即将重新执行');
    })
})
setTimeout(() => {
    msg2.value="水手"
}, 2000);
</script>